<template>
    <div>
        <div align="left" style="height: 35px">
            商品列表
        </div>
        <div class="shaixuansp">
            <span> 筛选查询 </span>
            <button @click="gjjiansuo" class="rightbut">  高级检索  </button>
        </div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="输入搜索：">
                <el-input v-model="product.productName" placeholder="商品名称" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="商品分类：">
                <el-select v-model="product.categroyId" placeholder="请选择商品分类" style="width: 180px">
                    <el-option label="" value=""></el-option>
                    <el-option label="后端" value="后端"></el-option>
                    <el-option label="前端" value="前端"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品状态：">
                <el-select v-model="productSate1" placeholder="商品状态" style="width: 180px">
                    <el-option label="" value=""></el-option>
                    <el-option label="上架" value="1"></el-option>
                    <el-option label="下架" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品标签：">
                <el-select v-model="product.searchKeywords" placeholder="请选择标签" style="width: 180px">
                    <el-option value=""></el-option>
                    <el-option value="java">java</el-option>
                    <el-option value="css">css</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getProductSJ">查询</el-button>
            </el-form-item>
        </el-form>
<!--        数据表-->
        <el-table
                :data="productlist.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                style="width: 100%"
                align="center"
                border>
            <el-table-column type="selection" width="50"/>
            <el-table-column prop="productId" v-if="false" align="center" />
            <el-table-column prop="productCode" label="编号" width="80" align="center"/>
            <el-table-column align="center" prop="mainImage" label="商品图片" width="140">
                <template slot-scope="scope">
                    <img :src="scope.row.mainImage" style="height: 50px" align="center"/>
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="120" align="center"/>
            <el-table-column prop="currentpriceProduct" label="价格 / 元" width="120" align="center"/>
            <el-table-column prop="productSate" label="上 / 下架" width="120" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.truefalse = scope.row.productSate == 1 ? true : false" @change="userStateChange(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="分类" width="120" align="center"/>
            <el-table-column prop="searchKeywords" label="标签" width="120" align="center"/>
            <el-table-column prop="hits" label="销量" width="120" align="center"/>
            <el-table-column prop="result" label="审核状态" width="130" align="center">
                <template slot-scope="scope">
                    {{scope.row.result}}<br/>
                    <el-button
                        @click="shxq(scope.row)"
                        v-if="scope.row.result == '已审核'"
                        target="_self"
                        type="text"
                        style="color: #4e8fff"
                       >审核详情</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="bianji(scope.row)" type="text" size="small">编辑</el-button><br/>
                    <el-button @click="rizhi(scope.row)" type="text" size="small">日志</el-button>
                    <el-button @click="shanchu(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total=totalCount>
        </el-pagination>
<!--        删除的提示框-->
        <el-dialog title="提示" :visible.sync=delVisible width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
        </el-dialog>
<!--        高级检索-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="Advancedretrievalsp">
                <div class="View_details_top">
                    <span>高级检索</span>
                    <span class="back" @click="Advancedretrievalsp = false">×</span>
                </div>
                <el-form
                        :inline="true"
                        :model="this.product"
                        class="demo-form-inline"
                        label-width="80px"
                        @submit.native.prevent>
                    <el-form-item class="Advanced_retrieval" label="商品分类:">
                        <el-select class="tab_two_like" v-model="product.categroyId" placeholder="请选择商品分类">
                            <el-option label="" value=""></el-option>
                            <el-option label="后端" value="后端"></el-option>
                            <el-option label="前端" value="前端"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品名称:">
                        <el-input class="tab_two_like" v-model="product.productName"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品状态:">
                        <el-select class="tab_two_like" v-model="productSate1">
                            <el-option label="" value=""></el-option>
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品价格:">
                        <el-input class="tab_two_like" v-model="product.currentpriceProduct" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="审核状态:">
                        <el-select class="tab_two_like" v-model="product.result" placeholder="">
                            <el-option label="" value=""></el-option>
                            <el-option label="已审核" value="已审核"></el-option>
                            <el-option label="未通过" value="未通过"></el-option>
                            <el-option label="待审核" value="待审核"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品标签:">
                        <el-select class="tab_two_like" v-model="product.searchKeywords" placeholder="">
                            <el-option label="" value=""></el-option>
                            <el-option label="书" value="书"></el-option>
                            <el-option label="java" value="java"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="Advancedretrievalsp = false" class="View_details_bottom_no">取消</button>
                        <button @click="getProductSJ" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>

<!--        查看商品信息-->
        <transition name="el-fade-in-linear">
            <div class="View_details" v-if="Viewdetailshow">
                <div class="View_details_top"><span>商品详情</span><span class="back" @click="Viewdetailshow = false">×</span></div>
                <el-form v-model="product" :key="product.productId" :inline="true" class="demo-form-inline" align="left">
                    <el-form-item size="mini" class="View_details_content" label="商品编号：">
                        <el-input v-text="product.productCode"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品名称：">
                        <el-input v-text="product.productName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品价格：">
                        <el-input v-text="product.currentpriceProduct"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品状态：">
                        <el-input v-text="product.productSate"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品分类：">
                        <el-input v-text="product.title"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品销量：">
                        <el-input v-text="product.hits"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="商品标签：">
                            <el-input v-text="product.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="商品介绍：">
                            <el-input v-text="product.productDescription" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </transition>
        <!--        修改商品信息-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="UpdateViewdetailshow" align="left">
                <div class="View_details_top"><span>修改商品信息</span><span class="back" @click="UpdateViewdetailshow = false">×</span></div>
                <el-form v-model="product" :key="product.productId" :inline="true" class="demo-form-inline">
                    <el-form-item size="mini" class="View_details_content" label="商品编号：">
                        <el-input v-model="product.productCode"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品名称：">
                        <el-input v-model="product.productName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品价格：">
                        <el-input v-model="product.currentpriceProduct"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品状态：">
                        <el-input v-model="product.productSate"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品分类：">
                        <el-input v-model="product.title"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品销量：">
                        <el-input v-model="product.hits"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="商品标签：">
                            <el-input v-model="product.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="商品介绍：">
                            <el-input v-model="product.productDescription" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="UpdateViewdetailshow = false" class="View_details_bottom_no">取消</button>
                        <button @click="confirmModification" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
        <!--        审核详情页面-->
        <transition name="el-fade-in-linear">
            <div class="result_show" v-if="show">
                <div class="border_show">
                    <div class="result_show_top"><span class="result_show_top_left">审核详情</span><span @click="show = false" class="result_show_top_right">×</span></div>
                    <div class="result_show_top_tab">
                        <el-table  border :data="JsCourseRecord" style="width: 100%">
                            <el-table-column align="center" prop="implementDater" sortable label="审核时间" width="130"></el-table-column>
                            <el-table-column align="center" prop="implementId" label="审核人员" width="110"></el-table-column>
                            <el-table-column align="center" prop="result" label="审核结果" width="120"></el-table-column>
                            <el-table-column align="center" prop="remarks" label="反馈详情" width="200"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </transition>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                //商品表
                product:{
                    productId:"",       //商品ID
                    productName:"",     //商品名称
                    categroyId:"",      //分类ID
                    currentpriceProduct:"", //现在价格
                    result:"",          //审核状态
                    productSate:"",     //上 下架状态
                    searchKeywords:"",  //商品标签
                },
                productSate1:"",    //搜索的上 下架状态
                categroys: [],      //商品分类
                //审核表
                JsCourseRecord:{

                },
                Advancedretrievalsp: false,   //高级检索按钮
                truefalse:true, //上下架 开/关
                productlist:[], //查询到的数据
                currentPage:1,  // 默认显示第一条
                totalCount:0,   // 总条数，根据接口获取数据长度(注意：这里不能为空)
                pageSizes:[1,5,10,20],    // 个数选择器（可修改）
                PageSize:10,    // 默认每页显示的条数（可修改）
                delVisible:false,     //删除提示弹框的状态
                Viewdetailshow:false,  //查看商品信息的弹窗
                UpdateViewdetailshow:false, //修改商品信息的弹窗
                show:false,     //审核信息的弹窗
            };
        },
        methods:{
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val;
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
            },
            // 上下架按钮（开/关）
            async userStateChange (row) {
                //判断审核状态，已通过才可以操作
                if(row.result == "已审核"){
                    row.productSate = row.productSate == 1 ? 2 : 1;    //修改上下架
                    this.product.productId = row.productId;
                    this.product.productSate = row.productSate;
                    const {data:res} = await this.$http.post("/product/updProductSate", this.product);
                    if (res.code == '200') {
                        this.$message.success('更新成功！')
                    }else{
                        row.productSate = row.productSate == 1 ? 2 : 1; // 修改失败，将状态变回初始状态
                        this.$message.error('更新失败！')
                    }
                }else {
                    this.$message.error('审核未通过！')
                }

            },
            //跳转至日志页面
            rizhi(row){
                this.$router.push("/good/logs");
                sessionStorage.setItem("productId",row.productId);
            },
            //查询数据
            async getProduct(){
                const {data: res} = await this.$http.post("/product/getProduct");
                this.productlist = res.data;
                this.totalCount=res.data.length;
            },
            //检索查询数据
            async getProductSJ(){
                this.currentPage=1; // 展示数据先回到第一条，否则可能找不到数据
                this.product.productSate = this.productSate1;
                const {data: res} = await this.$http.post("/product/getProductJS",this.product);
                this.productlist = res.data;
                this.totalCount=res.data.length;
                this.Advancedretrievalsp = false;
            },
            //修改后的提交
            confirmModification(){
                this.$http.post("/product/updateProduct", this.product)
                    .then(res => {
                        console.log(res.data);
                        this.$message ( {
                            duration:1000,
                            type: "success" ,
                            message:"修改成功!"
                        });
                });
                this.UpdateViewdetailshow = false;
            },
            // 确定删除按钮
            deleteRow() {
                this.$http.get("/product/delproduct", {params:{productId:this.product.productId}})
                    .then(res => {
                        console.log(res);
                        if (res.data.code === 200) {
                            this.$message.success('删除成功');
                            this.getProduct();
                        }
                    }).catch(error => {
                        this.$message.error('删除失败');
                    });
                this.delVisible = false;//关闭删除提示框
            },
            //审核详情
            shxq(row){
                console.log("审核商品的id："+row.productId);

                // this.show = true;
            },
            //查看按钮
            chakan(data){
                this.product=data;
                this.Viewdetailshow = true;
            },
            //编辑按钮
            bianji(data){
                this.product=data;
                this.UpdateViewdetailshow = true;
            },
            //删除按钮
            shanchu(row) {
                this.product.productId = row.productId;
                this.delVisible = true;
            },
            //高级检索按钮
            gjjiansuo(){
                this.Advancedretrievalsp = true;
            },
        },
        //加载数据
        mounted() {
            this.getProduct();
        }
    }
</script>

<style scoped>
    .shaixuansp{
        height: 40px;
        text-align: left;
        padding: 10px 20px 0 20px;
        background-color: rgba(243, 243, 243, 0.65);
    }
    .shaixuansp .rightbut{
        float: right;
        margin: 0 15px;
        padding: 5px 10px;
        background-color: white;
        font-size: 10px;
        border: 1px #D8D8D8 solid;
    }
    .back{
        cursor: pointer;
        margin: 0px 17px 0px 0px;
        float: right;
        font-size: 34px;
    }
    .tab_two_like{
        margin: 8px 0px 0px 0px;
        width: 163px;
    }
    /*    高级检索*/
    .Advanced_retrieval{
        margin: 40px 0px 43px 66px;
    }
    .View_details_bottom{
        border-top: 1.5px #E4E4E4 solid;
    }
    .View_details_bottom_position{
        margin: 18px 0px 0px 258px;
    }
    .View_details_bottom_no {
        background: #FFFFFF;
        height: 34px;
        color: #32BC9C;
        width: 78px;
        border: 1px #CCCCCC solid;
        border-radius: 6%;
    }
    .View_details_bottom_yes{
        margin: 0px 0px 0px 20px;
        background: #32BC9C;
        height: 34px;
        color: #FFFFFF;
        width: 78px;
        border: 1px #32BC9C solid;
        border-radius: 6%;
    }
    /*    查看详情*/
    .View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 500px;
        height: 400px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_top{
        background-color: #F2F2F2;
        width: 700px;
        height: 50px;
    }
    .View_details_top>span{
        line-height: 50px;
        padding: 0px 0px 0px 25px;
        color: #666666;
        font-weight: 600;
    }
    .View_details_content{
        margin-left: 63px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content1{
        margin-left: 63px;
        margin-bottom: 20px;
        margin-top: 49px;
    }
    .View_details_content2{
        margin-left: 49px;
        margin-bottom: 48px;
        margin-top: 18px;
    }
    .View_details_content_commodity{
        margin: -44px 0px 0px 0px;
    }
    /*    修改商品信息*/
    .upDate_View_details{
        background: #FFFFFF;
        width: 700px;
        z-index: 5;
        top: 257px;
        left: 500px;
        height: 518px;
        position: absolute;
        box-shadow: 0px 4px 26px -8px;
    }
    .View_details_bottom{
        border-top: 1.5px #E4E4E4 solid;
    }
    .View_details_bottom_position{
        margin: 18px 0px 0px 258px;
    }
    .View_details_bottom_no {
        background: #FFFFFF;
        height: 34px;
        color: #32BC9C;
        width: 78px;
        border: 1px #CCCCCC solid;
        border-radius: 6%;
    }
    .View_details_bottom_yes{
        margin: 0px 0px 0px 20px;
        background: #32BC9C;
        height: 34px;
        color: #FFFFFF;
        width: 78px;
        border: 1px #32BC9C solid;
        border-radius: 6%;
    }
    /*    审核状态*/
    .result_class{
        cursor:pointer;
        color: #13BB9B;
        margin: 0px 4px 0px 4px;
        font-size: 10px;
    }
    .result_show{
        position: relative;
        margin: 118px 230px 0px 593px;
    }
    .result_show_top {
        background-color: #FFFFFF;
        width: 612px;
        height: 373px;
        position: absolute;
    }
    .result_show_top_left{
        background-color: #F2F2F2;
        margin: 0px 0px 0px 0px;
        padding: 18px 471px 14px 25px;
        color: #666666;
        font-weight: 600;
    }
    .result_show_top_tab{
        margin: 55px 0px 0px 26px;
        position: absolute;
    }
    .border_show{
        width: 612px;
        height: 373px;
        box-shadow: 0px 4px 26px -8px;
    }
    .result_show_top_right{
        cursor: pointer;
        line-height: 50px;
        font-size: 27px;
        color: #666666;
        padding: 6px 31px 11px 0px;
        background: #F2F2F2;
        font-weight: 600;
    }
</style>